<template>
  <div class="cms-views-container cms-retieve-password-page">
    <div>
      <header class="flex items-center justify-start h-10 px-4">
        <LeftOutlined class="text-base" />
        <span class="text-center text-base flex-1 text-[#48494d] font-medium">
          {{ type === 3 ? '设置新密码' : '找回密码' }}
        </span>
      </header>
    </div>

    <form class="px-8 pt-4" v-if="type !== 3">
      <div class="login-input">
        <span>
          <label class="pr-9">账号</label> <label v-if="type !== 1">abcd1234</label>
          <label v-else class="text-[#B4B8BF]">请输入账号</label></span
        >
        <img :src="headerIcons.password_close" alt="" class="w-6 h-6" v-if="type !== 1" />
      </div>

      <div class="login-input">
        <span>
          <label class="pr-9">邮箱</label> <label v-if="type !== 1">abcd1234.com</label>
          <label v-else class="text-[#B4B8BF]">请输入已绑定的邮箱</label></span
        >

        <img :src="headerIcons.password_close" alt="" class="w-6 h-6" v-if="type !== 1" />
      </div>
      <div class="login-input">
        <span>
          <label class="pr-6">验证码</label>
          <label class="text-[#B4B8BF]">
            <span v-if="type === 2" class="login-primary">|</span>请输入邮箱验证码</label
          ></span
        >
        <span :class="type === 2 ? 'login-primary cursor-pointer' : 'text-[#B4B8BF]'">获取验证码</span>
      </div>
    </form>
    <form class="px-8 pt-4" v-else>
      <div class="login-input">
        <span>
          <label class="pr-9">新密码</label>
          <label class="text-[#B4B8BF]"><span class="login-primary">|</span>请输入新密码</label>
        </span>
        <img :src="headerIcons.eye_close" alt="" class="w-6 h-6" />
      </div>

      <div class="login-input">
        <span>
          <label class="pr-6">确认密码</label>
          <label class="text-[#B4B8BF]">请输入新密码</label></span
        >
        <img :src="headerIcons.eye_close" alt="" class="w-6 h-6" />
      </div>
    </form>
    <div class="px-8 mt-[18px] relative">
      <button
        class="block mt-6 h-[42px] w-full text-white border-0 bg-gradient-to-r from-[#ff983f] to-[#ff613f] rounded-lg"
        :class="type === 1 ? 'opacity-30' : ''"
      >
        {{ type === 3 ? '确定' : '下一步' }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { withDefaults } from 'vue'
import headerIcons from '../assets/login'

withDefaults(defineProps<{ type: number }>(), { type: 1 })
</script>

<style scoped lang="less">
.cms-retieve-password-page {
  .login-input {
    height: 53px;
    border-bottom: 1px solid #f1f3f7;
    @apply flex items-center justify-between;

    label {
      @apply text-sm text-[#484a4d];
    }
  }

  // TODO: 后期改成css 变量

  .login-primary {
    color: #ff613f;
  }
}
</style>
